/*
 * @ddescription: 自营订单列表/商品详情
 * @Author: along
 * @Date: 2020-10-27
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-09 18:03:17
 */
<template>
    <div
        class="orderListDetail"
        v-loading="loading"
    >
        <!-- header -->
        <div class="header">
            <div class="header_title">
                订单详情
            </div>
            <div class="header_wrap">
                <p
                    class="header_refre"
                    @click="refreshPage()"
                >
                    刷新
                </p>
                <p
                    class="header_back"
                    @click="() => {
                        this.$router.push({
                            name: 'order-list'
                        })
                    }"
                >
                    返回
                </p>
            </div>
        </div>


        <!-- 基本信息 -->
        <div class="userFlex">
            <!-- nav -->
            <div class="nav_wrap">
                <p
                    v-if="refresh"
                    class="nav_refresh"
                >
                    点击刷新订单状态
                </p>
                <div class="nav_left">
                    <i
                        class="iconfont icon-shuaxin"
                        @mouseenter="refresh = true"
                        @mouseleave="refresh = false"
                        @click="refreshPage()"
                    />
                    <div class="nav_left_wrap">
                        当前订单状态:
                        <p
                            :style="{
                                color: (formData.status == 0 || formData.status == 1 || formData.status == 3) ? '#FF8E39' : (formData.status == 2 ? '#EE4E59' : (formData.status == 4 ? '#2FBDB3' : '#333333')), marginLeft: '6px'
                            }"
                        >
                            {{ formData.status | filterStatus }}
                        </p>
                    </div>
                </div>
                <div class="nav_right">
                    <!-- 状态展示:待支付 -->
                    <div
                        v-if="formData.status == 0"
                        class="nav_button"
                        @click="cancelOrder()"
                    >
                        取消订单
                    </div>
                    <!-- 状态展示: 待发货 -->
                    <div
                        v-if="formData.status == 2"
                        class="nav_button button_bg"
                        @click="confirmGoods()"
                    >
                        确认发货
                    </div>
                    <!-- 状态展示: 待收货 -->
                    <div
                        v-if="formData.status == 3"
                        class="nav_button"
                        @click="changeOrder(999)"
                    >
                        修改物流单号
                    </div>
                    <!-- 状态展示: 待收货、订单完成 -->
                    <!-- <div
                        v-if="formData.status == 3 || formData.status == 4"
                        class="nav_button"
                        @click="checkOrder()"
                    >
                        查看物流信息
                    </div> -->
                    <!-- 状态展示: 订单完成 -->
                    <div
                        v-if="formData.status == 4"
                        class="nav_button"
                        @click="delyRefundDate()"
                    >
                        延长退款时间
                    </div>
                    <div
                        v-if="formData.status == 3"
                        class="nav_button"
                        :style="{width: '80px'}"
                        @click="reissue(formData)"
                    >
                        补发
                    </div>
                </div>
            </div>
            <div
                class="userInfo"
            >
                <p class="title">
                    基本信息
                </p>
                <div class="item">
                    <div class="item_list">
                        订单编号:
                        <p class="item_title">
                            {{ formData.order_no ? formData.order_no : '--' }}
                        </p>
                    </div>
                    <div class="item_list">
                        下单时间:
                        <p class="item_title">
                            {{ formData.create_time * 1000 | dateFormat('yyyy/MM/dd HH:mm') }}
                        </p>
                    </div>
                    <div class="item_list">
                        支付方式:
                        <p class="item_title">
                            {{ formData.pay_types | filterPay }}
                        </p>
                    </div>
                </div>
                <div
                    class="item"
                    :style="{marginTop: '24px'}"
                >
                    <div class="item_list">
                        买家昵称:
                        <p class="item_title">
                            {{ formData.address_info.user_name | filterName(formData.buy_student_list) }}
                        </p>
                    </div>
                    <div class="item_list">
                        订单类型:
                        <p class="item_title">
                            {{ formData.order_category | filterOrderType }}
                        </p>
                    </div>
                    <div class="item_list">
                        买家备注:
                        <p class="item_title">
                            {{ formData.student_remark | filterRemark }}
                        </p>
                    </div>
                </div>
                <!-- <div
                    class="item"
                    :style="{marginTop: '24px'}"
                >
                    <div class="item_list">
                        商家备注:
                        <p
                            class="item_title"
                        >
                            {{ formData.remark ? formData.remark : '--' }}
                        </p>
                    </div>
                </div> -->
                <div
                    class="item"
                    :style="{marginTop: '24px'}"
                >
                    <div
                        class="item_list"
                        :style="{width: '600px'}"
                    >
                        <p :style="{color: 'rgba(136, 136, 136, 1)', fontSize: '14px'}">
                            物流单号:
                        </p>
                        <div class="item_list_wrap">
                            <div
                                v-for="(row,index) in formData.tracking_info_list"
                                :key="index"
                                class="item_list_text"
                                :style="{marginBottom: formData.tracking_info_list.length > 1 ? '16px' : '0px'}"
                            >
                                <p class="item_list_content">
                                    {{ row.logistics_name }}(单号: {{ row.tracking_no ? row.tracking_no : '--' }})
                                </p>
                                <p
                                    class="item_list_button"
                                    @click="changeOrder(index)"
                                >
                                    修改物流单号
                                </p>
                                <p
                                    class="item_list_button"
                                    v-if="formData.status == 3 || formData.status == 4"
                                    @click="checkOrder(row.tracking_no)"
                                >
                                    查看物流
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item_line" />

                <!-- 收件人信息 -->
                <p class="title">
                    收件人信息
                </p>
                <div class="item">
                    <div class="item_list">
                        收件人:
                        <p class="item_title">
                            {{ formData.address_info.user_name }}
                        </p>
                    </div>
                    <div class="item_list">
                        电话号码:
                        <p class="item_title">
                            {{ formData.address_info.phone }}
                        </p>
                    </div>
                </div>
                <div
                    class="item"
                    :style="{marginTop: '24px'}"
                >
                    <div class="item_list">
                        收件地址:
                        <p class="item_title">
                            {{ formData.address_info.province_name }}{{ formData.address_info.city_name }}{{ formData.address_info.county_name }}{{ formData.address_info.detail_info }}
                        </p>
                        <p
                            class="item_copy"
                            @click="copy(formData.address_info.province_name + formData.address_info.city_name + formData.address_info.county_name + formData.address_info.detail_info)"
                        >
                            复制
                        </p>
                        <!-- 待支付、待发货、待收货 -->
                        <p
                            v-if="formData.status == 0 || formData.status == 2 || formData.status == 3"
                            class="item_change"
                            @click="changeAdress()"
                        >
                            修改地址
                        </p>
                    </div>
                </div>
                <div
                    class="item"
                    :style="{marginTop: '24px'}"
                    v-if="!!formData.cross_border_info && !!formData.cross_border_info.real_name && !!formData.cross_border_info.id_card_number"
                >
                    <div
                        class="item_list"
                        v-if="formData.cross_border_info.real_name"
                    >
                        真实姓名:
                        <p class="item_title">
                            {{ formData.cross_border_info.real_name ? formData.cross_border_info.real_name : '--' }}
                        </p>
                    </div>
                    <div
                        class="item_list"
                        v-if="formData.cross_border_info.id_card_number"
                    >
                        身份证号码:
                        <p class="item_title">
                            {{ formData.cross_border_info.id_card_number ? formData.cross_border_info.id_card_number : '--' }}
                        </p>
                    </div>
                </div>
                <div class="item_line" />

                <!-- 购买商品信息 -->
                <order-detail
                    ref="orderDetail"
                    :table="formData"
                    @update="update"
                    @show="showProduct"
                    @set="setProduct"
                />
            </div>
        </div>

        <!-- 修改地址弹窗 -->
        <change-address
            ref="changeAddress"
            @update="update"
        />

        <!-- 修改规格 -->
        <change-product
            ref="changeProduct"
            @update="update"
        />

        <!-- 确认发货 -->
        <logistics-delivery
            ref="logisticsDelivery"
            @update="update"
        />

        <!-- 查看物流信息 -->
        <logistice-list
            ref="logisticeList"
            @update="update"
        />

        <!-- 修改物流单号 -->
        <change-logistics-info
            ref="changeLogisticsIngo"
            @update="update"
        />
    </div>
</template>

<script>
import changeAddress from '@/components/manage/market/change-address.vue';
import orderDetail from '@/components/manage/market/order-self-detail.vue';
import changeProduct from '@/components/manage/market/change-product';
import logisticsDelivery from '@/components/manage/market/logistics-delivery';
import logisticeList from '@/components/manage/market/logistice-list.vue';
import changeLogisticsInfo from '@/components/manage/market/change-logistics-info.vue';

const PARAM = {
    order_no: '',//商品唯一编号
    loading: false,//刷新loading状态
    refresh: false
};

export default {
    components: {
        changeAddress,
        orderDetail,
        changeProduct,
        logisticsDelivery,
        logisticeList,
        changeLogisticsInfo
    },
    data () {
        return {
            ...PARAM,
            formData: {
                address_info: {
                    phone: '',
                    user_name: '',
                    province_name: '',
                    city_name: '',
                    county_name: '',
                    detail_info: ''
                }
            }
        };
    },
    watch: {},
    filters: {
        filterName (val, list) {
            if(!list) return '--';
            let str = '';

            if(list.length) {
                list.forEach((element, i) => {
                    str += element.true_name + (i + 1 === list.length ? '' : ';');
                });
            }

            return str;
        },
        filterRemark (val) {
            if(!val) return '--';
            if(val.length < 20) return val;
            return val.slice(0,20) + '...';
        },
        filterOrderType (val) {
            if(val == 0) return '一般订单';
            if(val == 1) return '抢购订单';
            if(val == 2) return '核销订单';
            if(val == 3) return '折扣订单';
            if(val == 5) return '0元购';
            if(val == 6) return '砍价订单';
            if(val == 7) return '团购订单';
        },
        filterStatus (val) {
            if(val == 0) return '待支付';
            if(val == 1) return '团购中';
            if(val == 2) return '待发货';
            if(val == 3) return '待收货';
            if(val == 4) return '订单完成';
            if(val == -1) return '订单取消';
            if(val == -11) return '逾期未处理';
        },
        filterPay (val) {
            if(!val) return '--';
            if(val.includes(1) && val.includes(2)) {
                return '微信;支付宝';
            }

            if(val.includes(1) && !val.includes(2)) {
                return '微信';
            }

            if(!val.includes(1) && val.includes(2)) {
                return '支付宝';
            }

            if(!val.includes(1) && !val.includes(2)) {
                return '--';
            }
        }
    },
    created(){
        this.$store.commit('header/SET_HEADER', [{title: '订单管理'},{title: '订单列表', path: '/manage/market/order-list'},{title: '订单详情'}]);
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            if(this.$route.query.no) {
                this.loading = true;
                this.order_no = this.$route.query.no;
                this.getList();
            }
        },

        /**
         * @description 获取订单详情数据
         */
        getList () {
            this.$post('/ShopGoodsOrder/get', {
                order_no: this.order_no
            }, resp => {
                if (resp.code == 1) {
                    this.formData = {
                        ...resp.data
                    };
                    this.loading = false;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 刷新页面
         */
        refreshPage () {
            this.loading = true;
            this.getList();
            setTimeout(()=>{
                this.loading = false;
            },300);
        },

        /**
         * @description 补发,在之前发货基础上追加数据
         */
        reissue (row) {
            if(this.formData.tracking_info_list.length == 10) {
                this.$notify({
                    title: '警告',
                    message: '最多只可添加10个物流单号',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }
            this.$post('/ShopGoodsOrder/get', {
                order_no: row.order_no
            }, resp => {
                if (resp.code == 1) {
                    this.$refs.logisticsDelivery.setData({
                        order_no: row.order_no,
                        user_name: resp.data.address_info.user_name,
                        phone: resp.data.address_info.phone,
                        detail_info: resp.data.address_info.province_name + resp.data.address_info.city_name + resp.data.address_info.county_name +resp.data.address_info.detail_info,
                    });

                    let tracking_info = this.formData.tracking_info_list.reduce((cur,next) => {
                        cur.push({
                            logistics_no: next.logistics_no,
                            tracking_no: next.tracking_no
                        });
                        return cur;
                    },[]);

                    this.$refs.logisticsDelivery.show('2', tracking_info);
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 取消订单
         */
        cancelOrder () {
            this.$confirm('是否要取消该订单', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/ShopGoodsOrder/cancel', {
                    order_no: this.formData.order_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getList();
                        this.$notify({
                            title: '提示',
                            message: '取消成功',
                            duration: 500,
                            type: 'success'
                        });
                        // setTimeout(()=>{
                        //     this.$router.push({
                        //         name: 'manage-market-order-list'
                        //     });
                        // },500);
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * @description 确认发货，打开发货弹窗
         */
        confirmGoods () {
            this.$refs.logisticsDelivery.show();
            this.$refs.logisticsDelivery.setData({
                order_no: this.formData.order_no,
                user_name: this.formData.address_info.user_name,
                phone: this.formData.address_info.phone,
                detail_info: this.formData.address_info.province_name + this.formData.address_info.city_name + this.formData.address_info.county_name + this.formData.address_info.detail_info,
            });
        },

        /**
         * @description 修改物流单号
         */
        changeOrder (index) {
            this.$refs.changeLogisticsIngo.show({
                order_no: this.formData.order_no,
                tracking_info_list: JSON.parse(JSON.stringify(this.formData.tracking_info_list)),
                index: index
            });
        },

        /**
         * @description 查看物流信息
         */
        checkOrder (tracking_no) {
            this.$refs.logisticeList.fnSeeLogInfo(this.formData.order_no, 1, '', tracking_no);
        },

        /**
         * @description 延长退款时间
         */
        delyRefundDate () {
            if(Number(this.formData.hire_finance_complete_time_change_last_count) > 0) {
                this.$prompt('提示:如在限定时间内，预计无法处理完该笔退款的申请，则您可在下方设置延长退款时间。须知：单笔订单仅限延长退款两次，单次延长时间最长为5天', '延长退款时间', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /[0-5]/,
                    inputErrorMessage: '请输入正确的天数'
                }).then(({ value }) => {
                    this.$post('/ShopGoodsOrder/changeHireFinanceCompleteTime', {
                        order_no: this.formData.order_no,
                        append_days: value,
                    }, resp => {
                        if (resp.code == 1) {
                            this.getList();
                            this.$notify({
                                title: '提示',
                                message: '延长成功',
                                duration: 2000,
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '警告',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                });
            } else {
                this.$notify({
                    title: '警告',
                    message: '单笔订单延长退款最多两次',
                    duration: 2000,
                    type: 'warning'
                });
            }
        },

        /**
         * @description 复制地址
         */
        copy (content) {
            let str = content;
            let oInput = document.createElement("input");

            oInput.value = str;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.style.display = "none";
            this.$notify({
                title: '提示',
                message: '复制成功',
                duration: 2000,
                type: 'success'
            });
        },

        /**
         * @description 打开修改地址弹窗
         */
        changeAdress () {
            this.$refs.changeAddress.setValue(this.formData.address_info, this.order_no);
            this.$refs.changeAddress.show();
        },

        /**
         * @description 更新当前订单详情列表
         */
        update () {
            this.getList();
        },

        /**
         * @description 打开设置规格弹窗
         */
        showProduct () {
            this.$refs.changeProduct.show();
        },

        /**
         * @description 设置规格数据
         */
        setProduct (row) {
            this.$refs.changeProduct.set(row);
        }
    }
};
</script>

<style lang="less" scoped>
.orderListDetail {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    .header {
        width: 100%;
        height: 68px;
        display: flex;
        align-items: center;
        padding-left: 24px;
        justify-content: space-between;
        box-sizing: border-box;
        border-bottom: 1px #EBEEF5 solid;
        background: #fff;
        .header_title {
            color: #333;
            font-size: 20px;
            font-weight: 500;
        }
        .header_wrap {
            display: flex;
            align-items: center;
            .header_refre {
                color: #666;
                font-size: 14px;
                cursor: pointer;
                width: 76px;
                text-align: center;
                height: 48px;
                line-height: 48px;
                box-sizing: border-box;
                border-right: 1px #F0F2F5 solid;
            }
            .header_back {
                color: #1890FF;
                font-weight: 500;
                cursor: pointer;
                font-size: 14px;
                width: 76px;
                text-align: center;
                height: 48px;
                line-height: 48px;
            }
        }
    }
    .userFlex {
        flex: 1;
        box-sizing: border-box;
        overflow: auto;
    }
    .nav_wrap {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        box-sizing: border-box;
        border-bottom: 1px #EBEEF5 solid;
        .nav_refresh {
            width: 108px;
            height: 20px;
            background: #FFFFFF;
            box-shadow: 0px 0px 14px 0px rgba(153, 169, 192, 0.3);
            border-radius: 2px;
            border: 1px solid #FFFFFF;
            color: #333;
            font-size: 12px;
            position: absolute;
            left: 11px;
            top: 15px;
            text-align: center;
            line-height: 20px;
            // display: none;
        }
        .nav_left {
            display: flex;
            padding-left: 40px;
            align-items: center;
            .icon-shuaxin {
                font-size: 16px;
                cursor: pointer;
                color: #333;
                margin-right: 8px;
                &:hover {
                    color: #20A0FF;
                }
            }
            .nav_left_wrap {
                display: flex;
                color: #333;
                font-size: 16px;
                font-weight: 500;
                margin-right: 6px;
            }
        }
        .nav_right {
            height: 36px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-right: 40px;
            .nav_button {
                margin-right: 24px;
                width: 120px;
                height: 36px;
                text-align: center;
                line-height: 36px;
                border: 1px #20A0FF solid;
                color: #20A0FF;
                font-size: 14px;
                cursor: pointer;
                font-weight: 500;
                border-radius: 18px;
            }
            .button_bg {
                background: #20A0FF;
                color: #fff;
            }
        }
    }
    .userInfo {
        width: 100%;
        flex: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 24px 72px 50px 64px;
        .title {
            color: #333;
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 32px;
        }
        .item {
            display: flex;
            width: 100%;
            overflow: hidden;
            min-width: 912px;
            .item_list {
                width: calc(100% / 3);
                color: #888888;
                font-size: 14px;
                display: flex;
                align-items: center;
                white-space: nowrap;
                .item_title {
                    color: #333;
                    font-size: 14px;
                    margin-left: 5px;
                    white-space: nowrap;
                    max-width: 400px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .item_copy {
                    color: #20A0FF;
                    font-size: 14px;
                    margin: 0 16px;
                    cursor: pointer;
                }
                .item_change {
                    color: #20A0FF;
                    font-size: 14px;
                    cursor: pointer;
                }
                .item_list_wrap {
                    display: flex;
                    flex-direction: column;
                    margin-left: 10px;
                }
                .item_list_text {
                    display: flex;
                    flex-direction: row;
                    height: 15px;
                    align-items: center;
                    .item_list_content {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-right: 16px;
                    }
                    .item_list_button {
                        color: rgba(32, 160, 255, 1);
                        font-size: 14px;
                        font-weight: 500;
                        cursor: pointer;
                        margin-right: 16px;
                    }
                }
                .item_list_text:last-child {
                    margin-bottom: 0px !important;
                }
            }
        }
        .item_line {
            width: 100%;
            height: 1px;
            background: #EEEEEE;
            margin-top: 24px;
            margin-bottom: 24px;
        }
    }
}
</style>

<style lang="less">
.orderListDetail {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding-left: 64px;
        padding-right: 64px
    }
}
</style>